@import '../../style/themes';
@import '../../style/mixins';

.x-drag-resize {
  position: relative;

  $size: 8px;

  &_stick {
    position: absolute;
    transform: translate(-50%, -50%);
    // opacity: .5;

    &-tl {
      top: 0;
      left: 0;
      cursor: nwse-resize;
    }
    &-tc {
      top: 0;
      left: 50%;
      cursor: n-resize;
    }
    &-tr {
      top: 0;
      left: 100%;
      cursor: nesw-resize;
    }
    &-cl {
      top: 50%;
      left: 0;
      cursor: e-resize;
    }
    &-cr {
      top: 50%;
      left: 100%;
      cursor: e-resize;
    }
    &-bl {
      top: 100%;
      left: 0;
      cursor: nesw-resize;
    }
    &-bc {
      top: 100%;
      left: 50%;
      cursor: n-resize;
    }
    &-br {
      top: 100%;
      left: 100%;
      cursor: nwse-resize;
    }
  }
  &-default > &_stick {
    display: none;
    width: $size;
    height: $size;
    box-sizing: border-box;
    border: .1px solid rgba(#000, .15);
    background: lighten($primary-color, 15%);
    box-shadow: 0 0 2px rgba(#000, .6);
  }
  &-simple > &_stick {
    width: $size;
    height: $size;
    opacity: 0;
    &-tc, &-bc { width: calc(100% - $size); }
    &-cl, &-cr { height: calc(100% - $size); }
  }

  &-active > &_stick {
    display: unset;
  }
  &-default#{&}-active {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid $drag-resize-border-color;
      pointer-events: none;
    }
  }
}